<template> 
	<div class="brand bg-white mt-3 pt-2 text-drak mx-2" style="height: 400px">
		<!-- 名称 -->
		<div class="fs-xxl py-3 px-3 mb-3">{{brandName}} / 30分钟内送达</div>
		<!-- 描述 -->
		<div class="fs-xxxl py-3 px-3 mb-3" style="font-weight: bold;">{{brandTitle}}</div>
		<!-- swiper -->
		<!-- 内容产品 -->
		<div class="product py-3 my-3">
			<productList>
				<div class="d-flex">
					<router-link :to="'/productDetail/'+item.id" v-for="(item,i) in dataList" class="product_item mx-2" :key="i"  style="width: 120px" tag="div">
						<van-image
						style="width: 120px; height: 120px; border-radius: 8%;"
						:src="item.image"
						fit="contain">
					</van-image>
					<div>

						<div style="text-align: center; text-decoration: blink;overflow: hidden;">
							<div class="py-2" style="height: 60px">
								<span class="fs-xl" style="overflow: hidden; white-space:normal">{{item.name}}</span>
							</div>
							<div class="pb-2">
								<span class="text-pink fs-lg">￥{{item.price/100}}</span>
							</div>

						</div>
					</div>
				</router-link>
			</div>
		</productList>
	</div>
</div>
</template>

<script>
import productList from "../public/product-list";
  export default {
  	props: {
            brandName: {type: String ,require: true},
            brandTitle: {type: String ,require: true},
            dataList: {type: Array ,require: true}
          },
  	data(){
       return {
       	url: '',
       }
  	},
  	methods: {
        
  	},
    components: {
      productList
    },
}
</script>

<style lang="scss" scoped>
    .product_item {
    	background-color: white;
    	border-radius: 8%;
    }
	.brand {
	   border-radius: 2%;
       background: url('../../assets/images/522.png') no-repeat;
       background-size: 100% 100%;
	}
</style>